<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM出题练习 - Document Object Model - 文档对象模型</title>
    <style>
        #num{
            height: 35px;
            border-radius: 10px;
            border-color: aqua;
        }
        img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        #btn{
            background-color: green;
            width: 100px;
            height: 37px;
            color: white;
            border-radius: 5px;
            border: 0;
            margin-left: -5px;
        }

        table,td{
            border: 1px solid #999;
            border-collapse: collapse;
        }
        td{
            width: 100px;
            height: 30px;
        }

        #btn2{
            background-color: red;
            width: 100px;
            height: 37px;
            color: white;
            border-radius: 5px;
            border: 0;
            margin-left: -5px;
        }

        .init{
            color: #ccc;
            font-size: 12px;
        }

        .success{
            color: green;
            font-size: 12px;
        }

        .error{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <img src="../imgs/001.png" alt="">
    <div id="outer">
        <input type="text" id="num" placeholder="请父母输入题目数量" value="10">
        <button type="button" id="btn" onclick="test()">出题</button>
        <button type="button" id="btn2" onclick="check()">校验</button>
    </div>

    <div class="t_tbl">
        <table>
            <tbody id="tb">
               
            </tbody>
        </table>
    </div>

    <script>
        //定义一个函数
        function test(){
            //1. 获取dom对象 - 根据id属性值来获取 - 因为id是唯一的,返回的一个单个对象
            let num_input = document.getElementById("num");
            //2. 通过对象.属性可以访问属性值
            let num = num_input.value;
            //弹出框
            //alert(num)
            // 在控制台输出
            //console.log(num)

            //定一个字符串
            let str = "";

            //数组 - []
            let signs = ['+','-','*','/'];

            //3. dom的创建
            for(let i=0;i<num;i++){
                str+="<tr>";
                
                let m = parseInt(Math.random()*100+1);

                let n = parseInt(Math.random()*100+1);

                // 下标pos - [0,3]
                let sign = signs[parseInt(Math.random()*4)];

                str+="<td class='first'>"+m+sign+n+"</td>";

                str+="<td><input type='text'></td>";
               
                str+="<td><span class='init'>*</span></td>"
                
                str+="</tr>";
            }

            //4. 获取tbody标签
            let tb = document.getElementById("tb");
            //带有html标签的字符填充放到dom对象中
            tb.innerHTML = str;

        }

        //校验
        function check(){
            //获取所有的第一列的td
            //根据class属性的值来获取,但是返回的是一个数组
            let tds = document.getElementsByClassName("first");
            //遍历这个数组
            for(let i=0;i<tds.length;i++){
                let td = tds[i];
                let result = eval(td.innerHTML);
                //获取每个td对应的input标签
                let input_obj = td.nextElementSibling.children[0];
                
                //获取对应的span标签
                let span = td.nextElementSibling.nextElementSibling.children[0];
                //判断结果
                if(result == input_obj.value){
                    span.innerHTML="* √";
                    span.className="success";
                }else{
                    span.innerHTML="* ×";
                    span.className="error";
                }
                
            }
        }
    </script>
</body>
</html>